<template>
  <div class="container">
    <div class="right-container" :class="{ open: isOpenAlarm }">
      <div class="alarm-btn" @click="handleOpenAlarmList">
        <p>视</p>
        <p>频</p>
        <p>巡</p>
        <p>检</p>
        <svg
          t="1627550847659"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3960"
          width="16"
          height="16"
        >
          <path
            d="M1008 511.2 1008 511.2l-160 144 0 0c-8.8 8-20 12.8-32 12.8-26.4 0-48-21.6-48-48 0-14.4 6.4-26.4 16-35.2l0 0 67.2-60L624 524.8l0 0L416 524.8l0 0L172.8 524.8l0 0L48 524.8c-26.4 0-48-21.6-48-48 0-26.4 21.6-48 48-48l304 0 112 0c0 0 0 0 0 0l96 0 0 0 291.2 0L784 368l0 0c-9.6-8.8-16-21.6-16-35.2 0-26.4 21.6-48 48-48 12 0 23.2 4.8 32 12.8l0 0 160 144 0 0c9.6 8.8 16 21.6 16 35.2C1024 490.4 1017.6 502.4 1008 511.2z"
            p-id="3961"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
      <inspection v-if="isOpenAlarm" :list="inspectionList" />
    </div>
    <bottomlist @sendvideo="getvideo" class="bottonlist" />
    <amap></amap>
  </div>
</template>
<script>
import Amap from '_c/AMap'
import inspection from './inspection/index.vue'
import bottomlist from './BottomData.vue'
import API, { alamCenterApi } from '@/api'
import moment from 'moment'
export default {
  components: {
    Amap,
    inspection,
    bottomlist
  },
  data () {
    return {
      isOpenAlarm: false,
      inspectionList: []
    }
  },
  computed: {
    isFullScreen () {
      const { wWidth, wHeight } = this
      const scale = 2160 / 3840
      return wHeight / wWidth < scale
    }
  },
  methods: {
    handleOpenAlarmList () {
      this.isOpenAlarm = !this.isOpenAlarm
      this.getInspectionList()
    },
    async getInspectionList () {
      const list = await API(alamCenterApi.VIDEO_LIST)
      this.inspectionList = list.data
    },
    // 获取传得值
    async getvideo (row) {
      const timer = moment(row.happenTime).unix() * 1000
      const cameraIndexCode = row.srcParentIndex
      const url = (await API(alamCenterApi.VIDEO_BACK, {
        cameraIndexCode,
        beginTime: moment(timer - 10000).format('YYYY-MM-DDTHH:mm:ss.000Z'),
        endTime: moment(timer).format('YYYY-MM-DDTHH:mm:ss.000Z')
      })).data.url
      this.inspectionList = [{ url, cameraIndexCode }]
      this.isOpenAlarm = true
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  // top: 180px;
  // left: 0;
  // right: 0;
  // margin: auto;
  // border-radius: 4px;
  // z-index: 1;

  .right-container {
    position: absolute;
    width: 1600px;
    height: 900px;
    box-sizing: border-box;
    z-index: 1000;
    right: -1600px;
    top: 180px;
    transition: all 0.5s;
    background: rgba($color: #002a53, $alpha: 0.9);
    &.open {
      right: 80px;
    }
    &.smallSize {
      height: 1740px;
      // width: 812px;
      bottom: 30px;
    }
    .alarm-btn {
      left: -120px;
      top: 0;
      position: absolute;
      cursor: pointer;
      text-align: center;
      width: 100px;
      height: 100%;
      letter-spacing: 2rem;
      background: linear-gradient(#165a9d, #04325e);
      border-top: 8px solid rgb(0, 174, 255);
      padding-top: 25px;
      box-sizing: border-box;

      p {
        margin: 0;
        padding: 0;
        width: 100%;
        padding-left: 30px;
        margin-top: -5px;
      }
      svg {
        margin-top: 15px;
      }
    }
  }
  .bottonlist {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100;
  }
}
</style>
